<template>
    <div>
        <!-- el-input 是组件 组件监听原生事件需要加 native 才能生效 -->
        <el-input
                placeholder="请输入内容"
                v-model="message"
                @keyup.enter.native="handleAdd"
                clearable>
        </el-input>
    </div>
</template>

<script>
    import {nanoid} from 'nanoid'

    export default {
        name: 'MyHeader',
        props: ['handleReceive'],
        data() {
            return {
                message: ''
            }
        },
        methods: {
            handleAdd() {
                if (!this.message.trim()) return
                const data = { id: nanoid(), title: this.message, done: true }
                this.handleReceive(data)
                this.message = ''
            }
        }
    }
</script>

<style scoped>

</style>
